<template>
	<view class="container">
		<topBar>个人信息</topBar>
		<view class="content">
			<view class="item avatar">
				<view class="title">
					头像
				</view>
				<view class="val">
					<image class="img" :src="userInfo.avatar" v-if="userInfo.avatar"></image>
					<image class="img" src="/static/img/my/avatar.png" v-else></image>
				</view>
			</view>

			<view class="item">
				<view class="title">
					姓名
				</view>
				<view class="val">
					{{userInfo.name}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					所属公司
				</view>
				<view class="val">
					{{userInfo.company}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					电话号码
				</view>
				<view class="val">
					{{userInfo.phone}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					性别
				</view>
				<view class="val">
					{{userInfo.sex}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { useUserStore } from '@/stroes';
	const userStore = useUserStore()
	const userInfo = userStore.userInfo;
	// console.log('222', userInfo);
</script>

<style scoped lang="scss">
	.content {
		margin: 32rpx 32rpx;
		font-size: 28rpx;
		color: $default-color;
		border-radius: 16rpx;
		background-color: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 30rpx 40rpx 32rpx;

			border-top: 2rpx solid rgba(156, 159, 163, .1);

			&.avatar {
				padding: 16rpx 30rpx 16rpx 32rpx;
				border: none;
			}

			.val {
				font-weight: bold;
			}

			.img {
				width: 88rpx;
				height: 88rpx;
				border-radius: 500%;
			}
		}
	}
</style>